<script lang="ts" setup>
import { bikeModifieldsDetailOrderTableCol } from '@/api/user/types/user'
import { queryStoreOrderTableCol } from '@/api/store/types/store'
import UserInfoForm from '@/components/form/UserInfoForm.vue'
import { queryStoreOrder } from '@/api/store'
import { useTable } from '@/hooks/useTable'
import { useRoute } from 'vue-router'
import { defineAsyncComponent, reactive, onActivated } from 'vue'
import { getToken } from '@/utils/cache/cookies'
const BikeModifieldsTable = defineAsyncComponent(
  () => import('@/components/table/BikeModifieldsTable.vue')
)
const route = useRoute()
const form = reactive({
  phone: '',
  orderStatus: '0',
  orderId: '',
  storeId: route.query.storeId,
  type: 'bikeModified'
})
const handleFormSearch = () => {
  setCurrentPage(1)
  load(form)
}
const setId = (id: string) => {
  form.storeId = id
}
const { pagination, handleSizeChange, handleCurrentChange, data, loading, setCurrentPage, load } =
  useTable<queryStoreOrderTableCol>(queryStoreOrder, getToken() ?? '', () => form)
defineExpose({ handleFormSearch, setId })
onActivated(() => {
  form.storeId = route.query.storeId as string
})
</script>

<template>
  <user-info-form v-model="form" type="bikemodifield" @search="handleFormSearch">
    <template #select>
      <el-form-item prop="orderStatus" label="订单状态">
        <el-select v-model="form.orderStatus" style="width: 150px">
          <el-option value="0" label="全部" />
          <el-option value="1" label="待安装/待领取" />
          <el-option value="2" label="已安装/已领电" />
          <el-option value="3" label="已退单/已取消" />
        </el-select>
      </el-form-item>
    </template>
  </user-info-form>
  <bike-modifields-table :loading="loading" :data="data as bikeModifieldsDetailOrderTableCol[]" />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
</template>

<style scoped></style>
